<template>
  <!-- <div>
    <el-radio v-for="(item,index) of data" :key="index" :v-model="parent_uid" :label="item.uid" @click.stop="$emit('radioCheck',item,$event)">{{ item.name }}</el-radio>
  </div> -->
  <div>
    <div v-for="item of data" :key="item.info.order" class="check-item">
      <input :id="item.name" type="radio" :name="name" :checked="parentuid && item.uid && item.uid === parentuid" @click.stop="$emit('radioCheck', item, $event)">
      <label :for="item.name">
        {{ item.name }}
      </label>
    </div>
  </div>

</template>
<script>
// import 'element-ui/lib/theme-chalk/index.css'
export default {
  name: 'CheckList',
  props: {
    // parent_uid: {
    //   type: String,
    //   default: ''
    // },
    data: {
      type: Array,
      default: () => []
    },
    name: {
      type: String,
      default: ''
    },
    parentuid: {
      type: String,
      default: ''
    }
  },
  watch: {
    parentuid(val) {
      this.parentUid = val
    }
  },
  methods: {
    // numSort(a, b) {
    //   return a.info.order - b.info.order
    // }
  }
}
</script>
<style lang="scss" scoped>
  .check-item{
    margin: 0 1rem;
  }
  label{
    color: #fff;
    font-size: 1.3rem;
  }
  input[type=radio] {
    -webkit-appearance: none;  //这个属性是将input标签变成一个可修改样式的普通标签，目前有谷歌和火狐浏览器支持
    -moz-appearance: none;
    width: 0.8rem;
    border-radius: 50%;
    height: 0.8rem;
    background-color: transparent;
    border: 1px solid #fff;
  }
  input[type=radio]:checked{
    border: 0.2rem solid #0873ca;
    background: #fff;
  }

</style>
